<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test01</title>
    <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
</head>
<body>

<div id="app">
    <!--    <div style="height: 200px;width: 300px;border: solid 1px" @click="clickDiv">-->
    <div @click.self="clickDiv" style="height: 200px;width: 300px;border: solid 1px">
        <!--    <div style="height: 200px;width: 300px;border: solid 1px" @click.capture="clickDiv">-->
        <p>{{counter}}</p>
        <!--    <button @click="counter++">Click me</button>-->
        <!--    <button @click="clickme">Click me</button>-->
        <!--        <button @click="clickme('Hello',$event)">Click me</button>-->
        <!--        <button @click.stop="clickBtn">Click me</button>-->
        <!--        <button @click.once="clickBtn">Click me</button>-->
        <!--        <button @click.ctrl="clickBtn">Click me</button>-->
        <!--        <button @click.alt="clickBtn">Click me</button>-->
        <!--        <button @click.ctrl.alt="clickBtn">Click me</button>-->
        <!--        <button @click.meta="clickBtn">Click me</button>-->
        <!--        <button @click.ctrl.exact="clickBtn">Click me</button>-->
        <!--        <button @click.exact="clickBtn">Click me</button>-->
        <!--        <button @click.middle="clickBtn">Click me</button>-->
        <button @click.right.prevent="clickBtn">Click me</button>
        <br/>
        <!--    <a href="https://www.baidu.com/" @click="clickBaidu">Baidu</a>-->
        <!--        <a href="https://www.baidu.com/" @click.prevent="clickBaidu">Baidu</a>-->
        <a @click.prevent.stop href="https://www.baidu.com/">Baidu</a>
        <br/>
        <!--        Input: <input @keydown="keyDown">-->
        <!--        Input: <input @keydown.13="keyDown">-->
        Input: <input @keydown.enter="keyDown">
    </div>

</div>

<script>
    let vm = new Vue({
        el: '#app',
        data: {
            counter: 0,
        },
        methods: {
            clickBtn: function (str, event) {
                // console.dir(event);
                alert("BTN");
            },
            clickDiv: function (str, event) {
                // console.dir(event);
                alert("DIV");
            },
            clickBaidu: function () {
                alert("Baidu");
            },
            keyDown: function (event) {
                // console.dir(arg);
                alert("KeyDown");
                // alert(event.key);
            }
        }
    });

</script>

</body>
</html>